import 'package:flutter/material.dart';
import 'package:incidentmanager/ui/case/add/case_add_page.dart';
import 'package:incidentmanager/ui/home/main_page.dart';
import 'package:incidentmanager/ui/home/message_page.dart';
import 'package:incidentmanager/ui/home/user_page.dart';
import 'package:incidentmanager/ui/home/work_page.dart';

class HomePage extends StatefulWidget {
  static Route route() {
    return MaterialPageRoute<void>(builder: (_) => HomePage());
  }

  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  final List _tabMenus = ['首页', '工作台', '消息', '个人'];
  final List _tabIcons = [Icons.home, Icons.work, Icons.message, Icons.people];
  final List _tabPages = [MainPage(), WorkPage(), MessagePage(), UserPage()];
  int _index = 0;
  var _pageController = PageController(initialPage: 0);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: PageView.builder(
        itemBuilder: (context, index) => _tabPages[index],
        itemCount: _tabPages.length,
        onPageChanged: _onPageChange,
        controller: _pageController,
      ),
      bottomNavigationBar: _buildBottomBar(),
    );
  }

  /// 跳转案件添加页面
  void _toAddCasePage() {
    Navigator.of(context).push(CaseAddPage.route());
  }

  /// 页面切换
  void _onPageChange(int index) {
    setState(() {
      _index = index;
    });
  }

  /// 底部tab点击切换
  void _onItemTapped(int index) {
    _onPageChange(index);
    if (_pageController.hasClients) {
      _pageController.animateToPage(
        _index,
        duration: Duration(milliseconds: 400),
        curve: Curves.easeInOut,
      );
    }
  }

  /// 构建底部菜单栏
  Widget _buildBottomBar() {
    // 中间添加事件按钮
    final element = _buildAddBtn();
    // 底部菜单
    final List<Widget> items = _tabMenus
        .asMap()
        .keys
        .map(
          (index) => InkResponse(
            onTap: () {
              _onItemTapped(index);
            },
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                _buildIcon(index),
                _buildText(index),
              ],
            ),
          ),
        )
        .toList();
    // 拼接成完整菜单
    items.insert(2, element);

    return BottomAppBar(
      color: Colors.white,
      shape: CircularNotchedRectangle(),
      elevation: 0,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(
              width: 1,
              color: Color(0xFFE5E5E5),
            ),
          ),
        ),
        child: Padding(
          padding: EdgeInsets.fromLTRB(0, 6, 0, 6),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: items,
          ),
        ),
      ),
    );
  }

  /// 构建底部选项卡图标
  Widget _buildIcon(int index) {
    if (_index == index) {
      return Icon(
        _tabIcons[index],
        color: Theme.of(context).primaryColor,
      );
    }
    return Icon(
      _tabIcons[index],
      color: Color(0xFFCED4E0),
    );
  }

  /// 构建底部选项卡文字
  Widget _buildText(int index) {
    if (_index == index) {
      return Text(
        _tabMenus[index],
        style: TextStyle(
          color: Theme.of(context).primaryColor,
        ),
      );
    }
    return Text(
      _tabMenus[index],
      style: TextStyle(
        color: Color(0xFFCED4E0),
      ),
    );
  }

  /// 构建底部菜单中间按钮
  Widget _buildAddBtn() {
    return InkResponse(
      onTap: () {
        _toAddCasePage();
      },
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Material(
            child: Container(
              width: 42,
              height: 42,
              child: Icon(
                Icons.add,
                size: 32,
                color: Colors.white,
              ),
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.all(
                  Radius.circular(42),
                ),
              ),
            ),
            shadowColor: Color(0xFF2464FB),
            elevation: 0,
            borderRadius: BorderRadius.all(Radius.circular(42)),
          ),
        ],
      ),
    );
  }
}
